<template>
    <ElCard class="marginBottom">
        <ElForm inline>
            <ElFormItem label="字典名" style="margin-bottom: 0;">
                <ElInput v-model="searchDictName" placeholder="请输入字典名" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="字典标识符" style="margin-bottom: 0;">
                <ElInput v-model="searchDictIdentifier" placeholder="请输入字典标识" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem style="margin-bottom: 0;">
                <ElButton @click="onSearchDict" type="primary">搜索</ElButton>
                <ElButton @click="onReset" type="primary">重置</ElButton>
            </ElFormItem>
        </ElForm>
    </ElCard>
    <ElCard>
        <template #header>
            <ElButton type="primary" @click="onAddDict" v-hasPermi="['sys:dict:insert']">新增字典</ElButton>
        </template>

        <ElTable :data="resultData.records" v-loading="isLoading">
            <ElTableColumn label="序号" prop="name" width="150">
                <template #="{ row, $index }: { row: SysDictVO, $index: number }">
                    {{ $index + 1 }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="字典名" prop="name" />
            <ElTableColumn label="字典标识符" prop="identifier" />
            <ElTableColumn label="备注" prop="comment" />
            <ElTableColumn label="创建时间">
                <template #="{ row, $index }: { row: SysDictVO, $index: number }">
                    {{ row.createTime }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="修改时间">
                <template #="{ row, $index }: { row: SysDictVO, $index: number }">
                    {{ row.modifyTime }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="操作" width="350px">
                <template #="{ row, $index }: { row: SysDictVO, $index: number }">
                    <ElButton type="primary" @click="onShowDict(row.identifier)" v-hasPermi="['sys:dict:query']">详情
                    </ElButton>
                    <ElButton type="warning" @click="onEditDict(row)" v-hasPermi="['sys:dict:update']">编辑</ElButton>
                    <Popconfirm :title="`确定删除${row.name}?`" icon="Delete" @confirm="onDeleteDict(row)">
                        <ElButton type="danger" v-hasPermi="['sys:dict:delete']">删除</ElButton>
                    </Popconfirm>
                </template>
            </ElTableColumn>
        </ElTable>
        <template #footer>
            <Pagination v-model="resultData" @pageInfoChange="handleQuery"></Pagination>
        </template>
    </ElCard>

    <!-- 字典 新增/编辑 对话框 -->
    <ElDialog v-model="dialogInfo.show" :title="dialogInfo.title" width="700px" :show-close="false"
        :close-on-press-escape="false" :close-on-click-modal="false">
        <ElForm ref="formInstance" :rules="checkFormRoles" :model="formInfo" label-width="auto">
            <ElFormItem label="字典名" prop="name">
                <ElInput v-model="formInfo.name" placeholder="请输入字典名" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="字典标识符" prop="identifier">
                <ElInput v-model="formInfo.identifier" placeholder="请输入字典标识" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="备注" prop="comment">
                <ElInput v-model="formInfo.comment" type="textarea" placeholder="请输入备注" maxlength="30"
                    show-word-limit />
            </ElFormItem>
        </ElForm>
        <template #footer>
            <ElButton @click="hideDialog">取消</ElButton>
            <ElButton type="primary" @click="submitFormData()">确定</ElButton>
        </template>
    </ElDialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElButton, ElCard, ElDialog, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, type FormRules } from "element-plus";
import router from "@/router";
import { addDict, deleteDict, queryDictPage, updateDict } from "@/api/sysDict/sysDict";
import { sysDictVOToDTO, type SysDictDTO, type SysDictFiltDTO, type SysDictVO } from "@/api/sysDict/sysDictType";
import { usePageQuery } from "@/hook/useQuery";
import { useFormDialog } from "@/hook/useDialog";
import Pagination from "@/components/custom/Pagination.vue";
import Popconfirm from "@/components/custom/Popconfirm.vue";

/**
 * 搜索筛选字典名
 */
const searchDictName = ref<string>()
/**
 * 搜索筛选字典标识符
 */
const searchDictIdentifier = ref<string>()

/**
 * 新增字典
 */
const onAddDict = () => {
    showDialog('新增字典', undefined, () => addDict(formInfo.value))
}

/**
 * 修改字典
 * @param sysDictVO 要修改的字典
 */
const onEditDict = (sysDictVO: SysDictVO) => {
    showDialog('编辑字典', sysDictVOToDTO(sysDictVO), () => updateDict({ id: sysDictVO.id }, formInfo.value))
}

/**
 * 删除字典
 * @param sysDictVO 要删除的字典
 */
const onDeleteDict = async (sysDictVO: SysDictVO) => {
    await deleteDict({ id: sysDictVO.id })
    handleQuery()
}

/**
 * 进入字典详情页面
 * @param identifier 
 */
const onShowDict = (identifier: string) => {
    router.push({
        name: "DictData",
        params: {
            identifier: identifier
        }
    })
}

/**
 * 封装查询方法
 */
const {
    handleQuery, // 封装后的查询方法
    handleParamChange,
    resultData, // 查询到的数据
    isLoading   // 是否正在查询
} = usePageQuery<SysDictFiltDTO, SysDictVO>(queryDictPage)

/**
 * 搜索
 */
const onSearchDict = () => {
    handleParamChange({
        name: searchDictName.value,
        identifier: searchDictIdentifier.value
    })
    handleQuery()
}

/**
 * 重置搜索条件
 */
const onReset = () => {
    searchDictName.value = undefined
    searchDictIdentifier.value = undefined
    onSearchDict()
}

/**
 * 字典 新增/编辑 对话框相关内容
 */
const {
    showDialog,
    hideDialog,
    submitFormData,
    dialogInfo,
    formInfo,
    formInstance
} = useFormDialog<SysDictDTO>(() => handleQuery())

/**
 * 对话框校验规则
 */
const checkFormRoles = reactive<FormRules<SysDictDTO>>({
    name: [
        { required: true, message: '请输入字典名称', trigger: 'blur' },
        { min: 2, max: 30, message: '字典名称长度为2 - 30', trigger: 'blur' }
    ],
    identifier: [
        { required: true, message: '请输入字典标识符', trigger: 'blur' },
        { min: 2, max: 30, message: '字典标识符长度为2 - 30', trigger: 'blur' }
    ],
    comment: [
        { min: 2, max: 30, message: '备注长度为2 - 30', trigger: 'blur' }
    ]
})
</script>

<style scoped lang="scss"></style>
